/** * @description: 学生请假数据 */
<template>
  <div class="pub-floor floor4">
    <div class="title-wrapper">
      <h4>学生请假数据</h4>
      <span @click="skipDetail('/leaveStatistics')">详情 <van-icon name="arrow" size="14"/></span>
    </div>
    <p>课堂请假状态</p>
    <div class="echart-box">
      <PieEchart pieShowId="classroomLeave" :optionData="classroomLeaveData" :colorList="classroomLeaveColorList" titleText="学生总数" />
    </div>

    <p>非课堂请假离校状态</p>
    <div class="echart-box">
      <PieEchart pieShowId="noClassroomLeave" :optionData="noClassroomLeaveData" :colorList="noClassroomLeaveColorList" titleText="学生总数" />
    </div>
  </div>
</template>

<script>
import PieEchart from '@/components/pieEchart'
export default {
  name: 'StuLeave',
  components: { PieEchart },
  data() {
    return {
      classroomLeaveColorList: ['#FF7483', '#21A6FB', '#2CCDA8'],
      classroomLeaveData: [
        {
          name: '未扫码离校',
          value: 100,
        },
        {
          name: '离校中',
          value: 258,
        },
        {
          name: '已返校签到',
          value: 1000,
        },
      ],
      noClassroomLeaveColorList: ['#2CCDA8', '#2181FB'],
      noClassroomLeaveData: [
        {
          name: '请假中',
          value: 100,
        },
        {
          name: '假期结束',
          value: 125,
        },
      ],
    }
  },
  methods: {
    skipDetail(str) {
      this.$emit('skipDetail', str)
    },
  },
}
</script>

<style lang="scss" scoped>
.floor4 {
  p {
    font-size: $fz14;
    color: $color-title;
    margin-top: 16px;
    font-weight: bold;
  }
}
.echart-box {
  width: 100%;
  height: 230px;
}
</style>
